<template>
    <div class="tabbar">
        <ul>
            <li v-for="(item, index) in routerList" :key="index" @click="ChangeTab(item.path)">
                <img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="">
                <span :class=" $route.path.includes(item.path) ? 'active' : '' ">{{item.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {

            routerList: [
                {
                    title: '首页',
                    path: '/home',
                    active: '/images/home.png',
                    selected: '/images/home-select.png'
                },
                {
                    title: '分类',
                    path: '/list',
                    active: '/images/list.png',
                    selected: '/images/list-select.png'
                },
                {
                    title: '购物车',
                    path: '/cart',
                    active: '/images/cart.png',
                    selected: '/images/cart-select.png'
                },
                {
                    title: '我的',
                    path: '/my',
                    active: '/images/my.png',
                    selected: '/images/my-select.png'
                }
            ]

        }
    },
    methods: {
        ChangeTab(path) {
            // 判断是否点击的是同一个路由
            // 1.第一个是当前路由   this.$route.path
            // 2.第二个是点击的路由 path
            //     结果：如果点击的路由跟当前路由不相等 不 跳转
            if(this.$route.path == path) return;
            // 对应跳转页面
            this.$router.replace(path)
        }
    }
}
</script>

<style scoped>
    .tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.2rem;
        background-color: #fff;
    }
    .tabbar ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .tabbar ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .tabbar ul li img {
        width: .62rem;
        height: .62rem;
    }
    .tabbar ul li span {
        font-size: .32rem;
    }
    .active {
        color: red;
    }
</style>